<template>
  <div class="aCon">
    <openlayers-map class="mainM" v-if="levelSwitch === '1' || levelSwitch === '4'"></openlayers-map>
    <openlayers-map-two class="mainM" v-if="levelSwitch === '2'"></openlayers-map-two>
    <openlayers-map-three class="mainM" v-if="levelSwitch === '3'"></openlayers-map-three>
    <openlayers-map-five class="mainM" v-if="levelSwitch === '5'"></openlayers-map-five>
    <div class="contS">
      <!-- 左侧 -->
      <div class="a1 zf" :class="{ 'hidden': isHidden }" @mouseover="showImage = true" @mouseleave="showImage = false">
        <div>
          <left-detail-list-cloud v-if="levelSwitch === '1'"></left-detail-list-cloud>
          <left-detail-list-physics v-else-if="levelSwitch === '2'"></left-detail-list-physics>
          <left-detail-list-network v-else-if="levelSwitch === '3'"></left-detail-list-network>
          <left-detail-list-apply v-else-if="levelSwitch === '4'"></left-detail-list-apply>
          <left-detail-list-society v-else-if="levelSwitch === '5'"></left-detail-list-society>
        </div>
        <div class="midC">
          <div class="content">
            <img src="@/assets/img/left.png" @click="toggleVisibility" v-if="!isHidden" v-show="showImage">
            <img src="@/assets/img/right.png" @click="toggleVisibility" v-else>
          </div>
        </div>
      </div>

      <!-- 右侧详情一 -->
      <div class="a2" v-if="showDetail === true">
        <!-- <div class="a2"> -->
        <dv-border-box-13>
          <right-detail-all></right-detail-all>
        </dv-border-box-13>
      </div>

      <!-- 右侧详情二 -->
      <div class="a2" v-if="levelSwitch === '5' && showDetailTwo === true">
        <!-- <div class="a2"> -->
        <dv-border-box-10>
          <right-detail-all-two></right-detail-all-two>
        </dv-border-box-10>
      </div>

      <div v-if="levelSwitch === '4' && showDetail !== true"
        style="position: absolute;right: 0;bottom: 0;margin-bottom: 5%;margin-right: 2%;width: 20%;">
        <dv-border-box-7>
          <div class="tuContainer">
            <div class="tItem">
              <div class="cirC"></div>
              <div class="content">数据中心</div>
            </div>
          </div>
        </dv-border-box-7>
      </div>
    </div>
    <div class="tuli" v-if="levelSwitch === '1' && showDetail !== true">
      <dv-border-box-7>
        <div class="tuContainer">
          <div class="tItem">
            <div class="cirC"></div>
            <div class="content">数据中心</div>
          </div>
        </div>
      </dv-border-box-7>
    </div>
    <div class="tuli" v-if="levelSwitch === '2' && showDetail !== true">
      <dv-border-box-7>
        <div class="tuContainer">
          <div class="tItem">
            <div class="cirC"></div>
            <div class="content">数据中心</div>
          </div>
          <div class="tItem">
            <div class="cirG"></div>
            <div class="content">光缆段</div>
          </div>
          <div class="tItem">
            <div class="cirP"></div>
            <div class="content">POP</div>
          </div>
        </div>
      </dv-border-box-7>
    </div>

    <div class="tuli" v-if="levelSwitch === '3' && showDetail !== true">
      <dv-border-box-7>
        <div class="tuContainer">
          <div class="tItem">
            <div class="cirC"></div>
            <div class="content">数据中心</div>
          </div>
          <div class="tItem">
            <div class="cirG"></div>
            <div class="content">asn段</div>
          </div>
        </div>
      </dv-border-box-7>
    </div>

    <div class="tuli" v-if="levelSwitch === '5' && showDetailTwo !== true">
      <dv-border-box-7>
        <div class="tuContainer">
          <div class="tItem">
            <div class="cirC"></div>
            <div class="content">重点目标</div>
          </div>
        </div>
      </dv-border-box-7>
    </div>

  </div>
</template>

<script>
import LeftDetailListCloud from './component/leftDetailList-cloud/index.vue';
import LeftDetailListPhysics from './component/leftDetailList-physics/index.vue';
import LeftDetailListNetwork from './component/leftDetailList-network/index.vue';
import LeftDetailListApply from './component/leftDetailList-apply/index.vue';
import LeftDetailListSociety from './component/leftDetailList-society/index.vue';
import RightDetailAll from './component/rightDetailAll/rightDetailAll.vue';
import RightDetailAllTwo from './component/rightDetailAllTwo/rightDetailAllTwo.vue';
import OpenlayersMap from './component/mapControl/mapOne/openlayersMap.vue';
import OpenlayersMapTwo from './component/mapControl/mapTwo/openlayersMapTwo.vue';
import OpenlayersMapThree from './component/mapControl/mapThree/index.vue';
import OpenlayersMapFive from './component/mapControl/mapFive/openlayersMapFive.vue';
import { mapState } from 'vuex';

export default {
  components: {
    OpenlayersMap,
    OpenlayersMapTwo,
    OpenlayersMapThree,
    OpenlayersMapFive,
    RightDetailAll,
    LeftDetailListCloud,
    LeftDetailListPhysics,
    LeftDetailListNetwork,
    LeftDetailListApply,
    LeftDetailListSociety,
    RightDetailAllTwo,

  },
  data() {
    return {
      showRdetail: false,
      showRdetailTwo: false,
      isHidden: false,
      showImage: false
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
created(){
  // console.log(this.$store.state.switch.levelSwitch,'levelSwitch');
  this.$store.state.switch.levelSwitch = this.$route.query.flag?this.$route.query.flag:"1"
},
  computed: {
    ...mapState('switch', ['levelSwitch', 'showDetail', 'showDetailTwo'])
  },

  methods: {
    toggleVisibility() {
      this.isHidden = !this.isHidden;
    }
  },
};
</script>
<style lang="scss" scoped>
.aCon {
  width: 100%;
  height: 100%;
  position: relative;


  .mainM {
    position: absolute;
  }

  .tuli {
    width: 20%;
    float: right;
    margin-right: 30px;
  }

  .tuContainer {
    display: flex;
    margin: 20px;

    .tItem {
      flex-basis: 33%;
      display: flex;

      .cirC,
      .cirP,
      .cirG {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 8px;

      }

      .cirC {
        background-color: #00B0FF;
      }

      .cirP {
        background-color: red;
      }

      .cirG {
        background-color: pink;
      }


      .content {
        vertical-align: bottom;
        margin-top: 1.5px;
      }
    }
  }

  .contS {
    display: flex;

    .zf {
      transition: all 0.3s;
    }

    .hidden {
      transition: all 0.3s;
      transform: translateX(-465px);
    }


    .a1 {
      display: flex;

      .midC {
        width: 50px;
        height: 95%;
        margin-left: 5px;

        z-index: 1;
        display: flex;
        align-items: center;

        .content {
          width: 40px;
          user-select: none;

          img {
            cursor: pointer;
            width: 35px;
            height: 35px;
          }
        }
      }
    }

    .a2 {
      position: absolute;
      right: 0;
      margin-top: 10px;
      width: 450px;
      height: 92%;
    }
  }


}
</style>
